<template>
    <!-- 外层视口 -->
    <div class="wrapper" id="wrapper">
        <!-- <div class="lineEye">显</div> -->
        <SketchRule
                :lang="lang"
                :thick="thick"
                :scale="scale"
                :width="width"
                :height="height"
                :startX="startX"
                :startY="startY"
                :shadow="shadow"
                :horLineArr="lines.h"
                :verLineArr="lines.v"
                :cornerActive="true"
                @handleLine="handleLine"
                @onCornerClick="handleCornerClick"
                :palette="paletteStyle"
        >
        </SketchRule>
        <!-- 主视口 -->
        <div
                ref='screensRef'
                id="screens"
                @wheel="handleWheel"
                @scroll="handleScroll"
        >
            <!-- 视口容器 -->
            <div ref="containerRef" class="screen-container">
                <!-- 画布 -->
                <div id="canvas" :style="canvasStyle" />
            </div>
        </div>
    </div>
</template>
<script>
    import Vue from 'vue';
    import SketchRule from "vue-sketch-ruler";
    const rectWidth = 960;
    const rectHeight = 720;
    export default Vue.extend({
        data() {
            return {
                // 标尺的规模(缩放等级)
                scale: 1, //658813476562495, //1,
                // 初始化辅助标尺不显示时为空即可 lines: {h: [], v: [] },
                lines: {
                    h: [],
                    v: []
                },
                //lines: {
                //     h: [100, 200],
                //     v: [100, 200]
                // },
                thick: 20, // 标尺的刻度高度
                width: 500,// 当前加载标尺的窗口宽度
                height: 400, // 当前加载标尺的窗口高度
                startX: 0, //x轴尺子开头
                startY: 0, //y轴尺子开头
                lang: "zh-CN", // 中英文
                isShowRuler: true, // 显示标尺
                isShowReferLine: true, // 显示参考线
                paletteStyle: {
                    bgColor: 'rgba(225,225,225, 0)', // bgColor 刻度背景的颜色
                    longfgColor: '#BABBBC', // longfgColor 刻度长条的颜色
                    shortfgColor: '#C8CDD0', // shortfgColor 刻度小短条的颜色
                    fontColor: '#7D8694', // fontColor 标尺文字的颜色
                    shadowColor: '#E8E8E8', // shadowColor 激活标尺的背景的颜色
                    lineColor: '#5151A2',  // lineColor 辅助线的颜色
                    borderColor: '#B5B5B5', // borderColor 右上角的线条颜色
                    cornerActiveColor: '#B5B5B5', // cornerActiveColor
                }
            }
        },
        components: {
            SketchRule
        },
        computed: {
            // 标尺阴影的参数
            shadow() {
                return {
                    x: 0,
                    y: 0,
                    width: rectWidth,
                    height: rectHeight
                }
            },
            // 画布的样式
            canvasStyle() {
                return {
                    width: rectWidth + 'px',
                    height: rectHeight + 'px',
                    transform: `scale(${this.scale})`
                }
            }
        },
        methods: {
            // 标尺辅助线的回调
            handleLine(lines) {
                this.lines = lines;
            },
            // 右上角点击回调
            handleCornerClick() {
                alert('你点击了右上角')
                return;
            },
            // 滚动滚动条的回调
            handleScroll() {
                // 获取#screens容器的左，上，右和下分别相对浏览器视窗的位置
                const screensRect = document
                    .querySelector("#screens")
                    .getBoundingClientRect();
                // 获取#canvas容器的左，上，右和下分别相对浏览器视窗的位置
                const canvasRect = document
                    .querySelector("#canvas")
                    .getBoundingClientRect();

                // 重新计算x轴尺子开头的刻度
                const startX = (screensRect.left + this.thick - canvasRect.left) / this.scale;
                // 重新计算y轴尺子开头的刻度
                const startY = (screensRect.top + this.thick - canvasRect.top) / this.scale;

                this.startX = startX >> 0;
                this.startY = startY >> 0;
            },

            // 滚轮滚动滚动条控制缩放值
            handleWheel(e) {
                if (e.ctrlKey || e.metaKey) {
                    e.preventDefault();
                    const nextScale = parseFloat(
                        Math.max(0.2, this.scale - e.deltaY / 500).toFixed(2)
                    );
                    this.scale = nextScale;
                }
                this.$nextTick(() => {
                    this.handleScroll();
                });
            },

            // 初始化标尺
            initSize() {
                // 获取#wrapper容器的左，上，右和下分别相对浏览器视窗的位置
                const wrapperRect = document
                    .querySelector("#wrapper")
                    .getBoundingClientRect();
                const borderWidth = 1;
                // 动态计算当前加载标尺的窗口宽度
                this.width = wrapperRect.width - this.thick - borderWidth;
                // 动态计算当前加载标尺的窗口高度
                this.height = wrapperRect.height - this.thick - borderWidth;

            }
        },
        mounted() {
            // 滚动居中
            this.$refs.screensRef.scrollLeft =
                this.$refs.containerRef.getBoundingClientRect().width / 2 - 300; // 300 = #screens.width / 2
            // 初始化数据
            this.$nextTick(() => {
                this.initSize();
            });
        }
    });
</script>
<style>
    body {
        margin: 0;
        padding: 0;
        font-family: sans-serif;
        overflow: hidden; }

    body * {
        box-sizing: border-box;
        user-select: none; }

    .wrapper {
        background-color: #f5f5f5;
        position: relative;
        top: 100px;
        left: 100px;
        width: 900px;
        height: 700px;
        border: 1px solid #DADADC; }

    #screens {
        position: absolute;
        width: 100%;
        height: 100%;
        overflow: auto; }

    .screen-container {
        position: absolute;
        width: 5000px;
        height: 3000px;
    }

    .scale-value {
        position: absolute;
        left: 0;
        bottom: 100%; }

    .button {
        position: absolute;
        left: 100px;
        bottom: 100%; }

    .button-ch {
        position: absolute;
        left: 200px;
        bottom: 100%; }
    .button-en {
        position: absolute;
        left: 230px;
        bottom: 100%; }

    #canvas {
        position: absolute;
        top: 80px;
        left: 50%;
        margin-left: -80px;
        width: 160px;
        height: 200px;
        background: lightblue;
        transform-origin: 50% 0; }

</style>


